<template>
    <el-dialog :title="menuForm.id==0?'新增':'修改'" :visible.sync="show_flag.status">
        <el-form ref="menuForm" :model="menuForm" label-width="60px" :rules="rules">
            <el-form-item label="类型" prop="type">
              <el-radio-group v-model="menuForm.type">
                <el-radio :label="1">目录</el-radio>
                <el-radio :label="2">菜单</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="上级" v-if="menuForm.type == 2">
            <el-select v-model="menuForm.pid" placeholder="请选择活动区域">
                <el-option label="顶级菜单" value="0"></el-option>
                <el-option label="系统设置" value="1"></el-option>
                <el-option label="商城管理" value="2"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="名称" prop="title">
            <el-input v-model="menuForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图标" v-if="menuForm.type == 1">
            <el-input v-model="menuForm.icon" autocomplete="off"></el-input>
            </el-form-item>
            
            <el-form-item label="地址" v-if="menuForm.type == 2">
            <el-input v-model="menuForm.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
            <el-radio-group v-model="menuForm.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitMenu">确 定</el-button>            
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: [
        'show_flag'
    ],
    data() {
      return {
        dialogTableVisible: true,
        dialogFormVisible: true,
        menuForm: {
          id: 0,
          pid: '',
          title: '',
          icon: '',
          type: '',
          url: "",
          type: 1,
          status: '',
        },
        rules: {
          type: {
              required:true, message:"类型不可以为空", trigger: 'blur' 
          },
          title: {
              required:true, message:"名称不可以为空", trigger: 'blur', 
          },
          status: {
              required:true, message:"状态不可以为空", trigger: 'blur', 
          }
        }
        
      };
    },
    methods: {
      submitMenu(){
        this.$refs["menuForm"].validate((valid) => {
          if(valid){
              const url = this.menuForm.id == 0?'/menuadd':'/menuedit'
              this.$http.post(url,this.menuForm).then(
                res=>{
                  if(res.status == "200"){
                    //清空数据
                    this.menuForm = {
                      pid: '',
                      title: '',
                      icon: '',
                      type: '',
                      url: "",
                      type: 1,
                      status: '',
                    }
                    //关闭模态框
                    this.show_flag.status = false
                    //通知父组件刷新列表
                    this.$emit("updataMenu")
                  }
                }
              )
          }
        })
      }
    }
  }
</script>

<style>

</style>